import {
  View,
  Text,
  FlatList,
  TouchableOpacity,
  Image,
  StyleSheet,
  Dimensions,
} from 'react-native';
import React, {useState, useEffect} from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {getNewsList} from '../../apis/';

import Loading from '../../components/Loading';

const newsTypes = [
  {key: 'top', title: '头条'},
  {key: 'shehui', title: '社会'},
  {key: 'guonei', title: '国内'},
  {key: 'guoji', title: '国际'},
  {key: 'yule', title: '娱乐'},
  {key: 'tiyu', title: '体育'},
  {key: 'junshi', title: '军事'},
  {key: 'keji', title: '科技了'},
  {key: 'caijing', title: '财经'},
  {key: 'shishang', title: '时尚'},
];

export default function NewsStack({navigation}) {
  const [newsList, setNewsList] = useState([]);
  const [activeType, setActiveType] = useState(newsTypes[0]);
  useEffect(() => {
    getNewsList(activeType.key).then(res => {
      setNewsList(res);
    });
  }, [activeType]);
  return (
    <>
      {newsList.length ? (
        <FlatList
          data={newsList}
          renderItem={NewsItem}
          keyExtractor={item => item.uniquekey}
          ListHeaderComponent={HeaderCom}
          ListFooterComponent={() => (
            <Text
              style={{fontSize: 20, textAlign: 'center', marginVertical: 40}}>
              ------没有更多了------
            </Text>
          )}
          ItemSeparatorComponent={() => (
            <View
              style={{
                borderWidth: 1,
                borderColor: '#ccc',
                marginVertical: 5,
              }}></View>
          )}
        />
      ) : (
        <Loading />
      )}
    </>
  );

  function NewsItemThreeImages({item, index}) {
    return (
      <TouchableOpacity
        onPress={() =>
          navigation.navigate('NewsDetail', {
            url: item.url,
            titel: item.title,
            uniquekey: item.uniquekey,
          })
        }>
        <View style={[styles.newsItem2Container]}>
          <Text style={[styles.newsItem2Title]} numberOfLines={2}>
            {item.title}
          </Text>
          <View style={[styles.newsItem2ImageContainer]}>
            <Image
              source={{uri: item.thumbnail_pic_s}}
              style={[styles.newsItemImage]}
            />
            <Image
              source={{uri: item.thumbnail_pic_s}}
              style={[styles.newsItemImage]}
            />
            <Image
              source={{uri: item.thumbnail_pic_s}}
              style={[styles.newsItemImage]}
            />
          </View>
          <View style={[styles.newsItemFooter]}>
            <Text style={[styles.newsItemMeta]} numberOfLines={1}>
              {item.date}
              {item.author_name}
            </Text>
            <Ionicons name={'heart-outline'} size={18} />
          </View>
        </View>
      </TouchableOpacity>
    );
  }

  function NewsItemSingleImage({item, index}) {
    return (
      <TouchableOpacity
        onPress={() =>
          navigation.navigate('NewsDetail', {
            url: item.url,
            titel: item.title,
            uniquekey: item.uniquekey,
          })
        }>
        <View style={[styles.newsItem1Container]}>
          <View style={[styles.newsItem1Text]}>
            <Text
              style={[styles.newsItem1Title]}
              numberOfLines={2}
              textBreakStrategy={'simple'}>
              {item.title}
            </Text>
            <View style={[styles.newsItemFooter]}>
              <Text style={[styles.newsItemMeta]} numberOfLines={1}>
                {item.date}
                {item.author_name}
              </Text>
              <Ionicons name={'heart-outline'} size={18} />
            </View>
          </View>
          <Image
            source={{uri: item.thumbnail_pic_s}}
            style={[styles.newsItemImage]}
          />
        </View>
      </TouchableOpacity>
    );
  }

  function NewsItem({item, index}) {
    // 存在三张图片
    if (item.thumbnail_pic_s02 && item.thumbnail_pic_s03) {
      return NewsItemThreeImages({item, index});
    } else {
      return NewsItemSingleImage({item, index});
    }
  }
  function HeaderCom() {
    return (
      <FlatList
        horizontal={true}
        data={newsTypes}
        keyExtractor={item => item.key}
        renderItem={({item, index}) => {
          let isActice = activeType.key === item.key;
          return (
            <TouchableOpacity onPress={() => setActiveType(item)}>
              <View
                style={{
                  width: 65,
                  height: 46,
                  padding: 10,
                  backgroundColor: isActice ? '#dfb' : '#fff',
                }}>
                <Text
                  style={{
                    fontSize: 18,
                    fontWeight: 'bold',
                    textAlign: 'center',
                    color: isActice ? 'red' : '#333',
                  }}>
                  {item.title}
                </Text>
              </View>
            </TouchableOpacity>
          );
        }}
      />
    );
  }
}

const styles = StyleSheet.create({
  newsItem1Container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'stretch',
    marginVertical: 10,
    paddingHorizontal: 10,
  },
  newsItem1Text: {
    flexDirection: 'column',
    justifyContent: 'space-between',
    width: (Dimensions.get('window').width * 2) / 3 - 25,
  },
  newsItem1Title: {
    flex: 1,
    fontSize: 18,
    marginBottom: 20,
  },
  newsItemFooter: {
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  newsItemMeta: {
    fontSize: 13,
  },
  newsItemImage: {
    width: Dimensions.get('window').width / 3 - 18,
    height: 80,
    marginVertical: 5,
    marginHorizontal: 10,
  },
  newsItem2Container: {
    justifyContent: 'flex-start',
    paddingHorizontal: 10,
  },
  newsItem2Title: {
    fontSize: 18,
  },
  newsItem2ImageContainer: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
  },
  newsItem2Footer: {
    fontSize: 13,
  },
});
